import React, { PureComponent } from 'react'
import { connect, withRouter } from '@umijs/max'
import { ExclamationCircleFilled } from '@ant-design/icons'
import { Form, Input, message, Modal, Select, Spin, TreeSelect } from 'antd'
import list2tree from 'list2tree'
import { defaultIconFun, HufuTreeTitle, ProTree, searchTreeListByName,OSSyncComponentModal } from '@/components'
import { TreeIcon } from '../../../components'
import { changeDir, getTree, saveDir, saveTask, saveTaskFlow, taskflowTree, toolList } from '../api'
import Tools from '@/utils/Tools'
import { regExp } from '@/utils/regExp.js'
import styles from './index.less'
import { getHashParameterByName } from '@/utils/helper'

const Bus = Tools.Bus
const { Item } = Form
const { TextArea } = Input
const { Option } = Select

const getNavTreeDataFunc = list2tree({
  idKey: 'id',
  parentIdKey: 'pid',
  newKey: {
    key: 'id',
    value: 'id',
    title: 'name',
  },
})

// form
const inlineFormItemLayout = {
  labelCol: {
    sm: { span: 5 },
  },
  wrapperCol: {
    sm: { span: 15 },
  },
}
/**
 * 数据开发任务类型 ----------------------------nodeType-----------------------------------
 * 0：普通目录
 * 1：工作流程目录
 * 2：数据集成目录
 * 3：数据开发目录
 * 4：数据质量目录
 * 10：资源
 * 11：函数
 * 12：开始节点
 * 13：sql
 * 14：mr
 * 15：impala
 * 16：shell
 * 17：python2
 * 18：python3
 * 19：pyspark
 * 20：离线同步
 * 21：接口采集
 * 22：数据质量
 * 23：离线开发目录
 * 24：离线同步目录
 * 25：数据质量目录
 * */
const isDir = (nodeType) => [0, 2, 3, 4, 23, 24, 25].includes(nodeType)
const getIcon = (nodeType, selectedKeys, themeValue) => {
  switch (nodeType) {
    case 0:
      return (props) => defaultIconFun(props, selectedKeys, themeValue)
    case 1:
      return <TreeIcon color="blue" iconName="icon-FlinkSQLrenwu" />
    case 2:
      return true
    case 3:
      return true
    case 4:
      return true
    case 13:
      return <TreeIcon color="green" iconName="icon-HiveSQL" />
    case 14:
      return <TreeIcon color="green" iconName="icon-MapRduce" />
    case 15:
      return <TreeIcon color="green" iconName="icon-Impala" />
    case 16:
      return <TreeIcon color="green" iconName="icon-Shell" />
    case 17:
      return <TreeIcon color="green" iconName="icon-Python2" />
    case 18:
      return <TreeIcon color="green" iconName="icon-Python3" />
    case 19:
      return <TreeIcon color="green" iconName="icon-Pyspark" />
    case 20:
      return <TreeIcon color="red" iconName="icon-lixiantongbu" />
    case 21:
      return <TreeIcon color="red" iconName="icon-jiekoucaiji" />
    case 22:
      return <TreeIcon color="blue" iconName="icon-shujuzhiliang1" />
    case 23:
      return (props) => defaultIconFun(props, selectedKeys, themeValue)
    case 24:
      return (props) => defaultIconFun(props, selectedKeys, themeValue)
    case 25:
      return (props) => defaultIconFun(props, selectedKeys, themeValue)
    default:
      return null
  }
}

// @connect(({ flowDev }) => ({ ...flowDev }))
class FlowDevTree extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      dirTree: [],
      modifyId: null,
      isShowTaskFlow: false,
      isShowTask: false,
      treeDataNew: props.treeList || [],
      operations: (item) => {
        const top = [
          <span
            key={1}
            onClick={() => this.showFilesModal(item.id)}
          >
            新建目录
          </span>,
        ]
        const footer = [
          <span
            key={5}
            onClick={() => {
              this.onDelete(item)
            }}
          >
            删除
          </span>,
        ]
        const operationsObj = {
          0: [
            ...top,
            <span
              key={2}
              onClick={() => this.showProcedureModal(item.id)}
            >
              新建工作流
            </span>,
            <span
              key={4}
              onClick={() => this.editFilesModal(item)}
            >
              编辑
            </span>,
            ...footer,
          ],
          2: [
            ...top,
            <span
              key={3}
              onClick={() => this.showTaskModal(item)}
            >
              新建任务
            </span>,
          ],
          3: [
            ...top,
            <span
              key={3}
              onClick={() => this.showTaskModal(item)}
            >
              新建任务
            </span>,
          ],
          4: [
            ...top,
            <span
              key={3}
              onClick={() => this.showTaskModal(item)}
            >
              新建任务
            </span>,
          ],
          1: process.env.APP_ENV !== 'os' ? [
            <span
              key={4}
              onClick={() => this.editProcedureModal(item)}
            >
              编辑
            </span>,
            ...footer,
          ] : [
            <span
              key={4}
              onClick={() => this.editProcedureModal(item)}
            >
              编辑
            </span>,
            <span
              key={5}
              onClick={() => this.onOSSync(item)}
            >
              同步
            </span>,
            ...footer,
          ],
          13: [
            <span
              key={4}
              onClick={() => this.editTaskModal(item)}
            >
              编辑
            </span>,
            <span
              key={5}
              onClick={() => this.moveModal(item, 3)}
            >
              移动
            </span>,
            ...footer,
          ],
          14: [
            <span
              key={4}
              onClick={() => this.editTaskModal(item)}
            >
              编辑
            </span>,
            <span
              key={5}
              onClick={() => this.moveModal(item, 3)}
            >
              移动
            </span>,
            ...footer,
          ],
          15: [
            <span
              key={4}
              onClick={() => this.editTaskModal(item)}
            >
              编辑
            </span>,
            <span
              key={5}
              onClick={() => this.moveModal(item, 3)}
            >
              移动
            </span>,
            ...footer,
          ],
          16: [
            <span
              key={4}
              onClick={() => this.editTaskModal(item)}
            >
              编辑
            </span>,
            <span
              key={5}
              onClick={() => this.moveModal(item, 3)}
            >
              移动
            </span>,
            ...footer,
          ],
          17: [
            <span
              key={4}
              onClick={() => this.editTaskModal(item)}
            >
              编辑
            </span>,
            <span
              key={5}
              onClick={() => this.moveModal(item, 3)}
            >
              移动
            </span>,
            ...footer,
          ],
          18: [
            <span
              key={4}
              onClick={() => this.editTaskModal(item)}
            >
              编辑
            </span>,
            <span
              key={5}
              onClick={() => this.moveModal(item, 3)}
            >
              移动
            </span>,
            ...footer,
          ],
          19: [
            <span
              key={4}
              onClick={() => this.editTaskModal(item)}
            >
              编辑
            </span>,
            <span
              key={5}
              onClick={() => this.moveModal(item, 3)}
            >
              移动
            </span>,
            ...footer,
          ],
          20: [
            <span
              key={4}
              onClick={() => this.editTaskModal(item)}
            >
              编辑
            </span>,
            <span
              key={5}
              onClick={() => this.moveModal(item, 2)}
            >
              移动
            </span>,
            ...footer,
          ],
          21: [
            <span
              key={4}
              onClick={() => this.editTaskModal(item)}
            >
              编辑
            </span>,
            <span
              key={5}
              onClick={() => this.moveModal(item, 2)}
            >
              移动
            </span>,
            ...footer,
          ],
          22: [
            <span
              key={4}
              onClick={() => this.editTaskModal(item)}
            >
              编辑
            </span>,
            <span
              key={5}
              onClick={() => this.moveModal(item, 4)}
            >
              移动
            </span>,
            ...footer,
          ],
          23: [
            ...top,
            <span
              key={3}
              onClick={() => this.showTaskModal(item)}
            >
              新建任务
            </span>,
            <span
              key={4}
              onClick={() => this.editFilesModal(item)}
            >
              编辑
            </span>,
            ...footer,
          ],
          24: [
            ...top,
            <span
              key={3}
              onClick={() => this.showTaskModal(item)}
            >
              新建任务
            </span>,
            <span
              key={4}
              onClick={() => this.editFilesModal(item)}
            >
              编辑
            </span>,
            ...footer,
          ],
          25: [
            ...top,
            <span
              key={3}
              onClick={() => this.showTaskModal(item)}
            >
              新建任务
            </span>,
            <span
              key={4}
              onClick={() => this.editFilesModal(item)}
            >
              编辑
            </span>,
            ...footer,
          ],
        }[item.nodeType]
        return [
          ...(operationsObj || []),
        ]
      },
      titleName: {
        13: '修改sql任务',
        14: '修改mr任务',
        15: '修改impala任务',
        16: '修改shell任务',
        17: '修改python2任务',
        18: '修改python3任务',
        19: '修改pyspark任务',
        20: '修改离线同步任务',
        22: '修改数据质量任务',
        21: '修改接口采集任务',
      },
      toolListdatadev: [],
      // removeTask: {
      //   1: '删除工作流程',
      //   1: '删除补数据',
      //   13: '删除sql任务',
      //   14: '删除mr任务',
      //   15: '删除impala任务',
      //   16: '删除shell任务',
      //   17: '删除python2任务',
      //   18: '删除python3任务',
      //   19: '删除pyspark任务',
      //   20: '删除离线同步任务',
      //   21: '删接口采集任务',
      //   22: '删除数据质量任务',
      //   4: '删除自定义函数',
      //   10: '删除程序资源',
      // },
      navListSpinning: false,
      moveDirTree: [],
      selectedNodeType: null,
      osSyncVisible: false,
      osSynclabel: '',
      osSyncjobid: '',
    }
    this.fileForm = React.createRef()
    this.procedureFormData = React.createRef()
    this.taskFormData = React.createRef()
    this.moveFormData = React.createRef()
  }

  componentDidMount() {
    toolList().then((res) => {
      if (res.data) {
        this.setState({
          toolListdatadev: res.data.datadev,
        })
      }
    })
    const tempTaskId = getHashParameterByName('taskId')
    this.getListAll(() => this.onSelectTask([tempTaskId]))
    this.getDirTree()
    Bus.addListener('ShowProcedureModal', this.showProcedureModal)
    Bus.addListener('getListAll', this.getListAll)
    // document.addEventListener('keydown', this.handleKeyDown)
    const create = getHashParameterByName('create')
    if (create === 'true') {
      this.setState({ isShowTaskFlow: true })
    }
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.treeList != this.props.treeList) {
      this.setState({
        treeDataNew: nextProps.treeList,
      }, () => {
        const queryNodeId = getHashParameterByName('nodeId')
        const queryNodeName = getHashParameterByName('nodeName')
        if (queryNodeId) {
          setTimeout(() => {
            this.onSelectTask([Number(queryNodeId)])
            const searchTree = searchTreeListByName(
              queryNodeName,
              this.props?.navList,
            )
            this.tree.onExpand(searchTree.fatchIds)
          })
        }
      })
    }
  }

  componentWillUnmount() {
    Bus.removeListener('ShowProcedureModal', this.showProcedureModal)
    Bus.removeListener('getListAll', this.getListAll)
    // document.removeEventListener('keydown', this.handleKeyDown)
  }

  onOSSync = (record) => {
    console.log(record)
    this.setState({
      osSyncVisible: true,
      osSyncjobid: record.id,
      osSynclabel: record.name,
    })
  }

  // 获取子节点所在的工作流的id
  getTaskFlowId = (itemId) => {
    const { navList } = this.props
    const getPitem = (id) => {
      const tepObj = navList.find((item) => id == item.id)
      if (tepObj) {
        if (tepObj.nodeType == 1) {
          return tepObj.id
        }
        return getPitem(tepObj.pid)
      }
      return null
    }
    return getPitem(itemId)
  }

  // 工作流弹窗
  showProcedureModal = (id) => {
    const fun = () => {
      this.setState({
        isShowTaskFlow: true,
        modifyId: null,
      }, () => {
        if (id) {
          this.procedureFormData.current.setFieldsValue({ pid: id })
        }
      })
    }
    this.getDirTree(id, fun)
  }

  // 编辑打开目录弹窗
  editProcedureModal = (item) => {
    this.fileForm.current?.resetFields()
    this.setState({
      modifyId: item.id,
      isShowTaskFlow: true,
    }, () => {
      if (item) {
        this.procedureFormData.current.setFieldsValue({
          pid: item.pid == '2' ? undefined : item.pid,
          name: item.name,
          remark: item.remark,
        })
      }
    })
  }

  // 打开新建任务弹窗
  showTaskModal = (item) => {
    const fun = () => {
      this.taskFormData.current?.resetFields()
      this.setState({
        modifyId: null,
        isShowTask: true,
        pItem: item,
      }, () => {
        if (item) {
          this.taskFormData.current && this.taskFormData.current.setFieldsValue({ pid: item.id })
          if (item.nodeType == 4) {
            this.taskFormData.current && this.taskFormData.current.setFieldsValue({ nodeType: 22 })
          }
        }
      })
    }
    this.getDirTree(item?.id, fun)
  }

  // 编辑打开任务弹窗
  editTaskModal = (item) => {
    const fun = () => {
      this.taskFormData.current?.resetFields()
      this.setState({
        modifyId: item.id,
        isShowTask: true,
        pItem: item,
        selectedNodeType: item.nodeType,
      }, () => {
        if (item) {
          this.taskFormData.current.setFieldsValue({
            pid: item.pid,
            nodeType: item.nodeType,
            nodeName1: item.name,
            remark: item.remark,
            apiType: item?.apiType,
          })
        }
      })
    }
    this.getDirTree(item?.id, fun)
  }

  // 打开新建目录弹窗
  showFilesModal = (id) => {
    const fun = () => {
      this.fileForm.current?.resetFields()
      this.setState({
        modifyId: null,
        isShowFiles: true,
      }, () => {
        if (id) {
          this.fileForm.current.setFieldsValue({ pid: id })
        }
      })
    }
    this.getDirTree(id, fun)
  }

  // 编辑打开新建目录弹窗
  editFilesModal = (item) => {
    const fun = () => {
      this.fileForm.current?.resetFields()
      this.setState({
        modifyId: item.id,
        isShowFiles: true,
      }, () => {
        if (item) {
          this.fileForm.current.setFieldsValue({
            pid: item.pid == '2' ? undefined : item.pid,
            name: item.name,
          })
        }
      })
    }
    this.getDirTree(item.id, fun)
  }

  getListAll = (cb) => {
    this.setState({
      navListSpinning: true,
    })
    this.props.dispatch({
      type: 'flowDev/getTree',
      params: { id: 2 },
      cb: (data) => {
        this.setState({
          navListSpinning: false,
        }, () => {
          cb && cb()
        })
      },
    })
  }

  getDirTree = (id, cb) => {
    this.setState({ navListSpinning: true })
    getTree({ id: id || 2 }).then((res) => {
      this.setState({
        dirTree: res.data,
        navListSpinning: false,
      }, () => {
        cb && cb()
      })
    }, (error) => {
      this.setState({ navListSpinning: false })
    })
  }

  fileTaskFlow = () => {
    this.procedureFormData.current.validateFields().then(values => {
      const postObj = {
        name: values.name,
        pid: values.pid ? values.pid : 2,
        remark: values.remark,
      }
      if (this.state.modifyId) {
        postObj.id = this.state.modifyId
      }
      this.setState({ navListSpinning: true })
      saveTaskFlow(postObj).then((res) => {
        if (res.status == 200) {
          const { tasks } = JSON.parse(JSON.stringify(this.props))
          const task = tasks.find((value) => value.id == postObj.id)
          if (task) {
            task.name = postObj.name
            // 将修改保存至props
            this.props.dispatch({
              type: 'flowDev/upFlow',
              params: {
                tasks,
              },
            })
          }
          this.setState({
            isShowTaskFlow: false,
            navListSpinning: false,
          })
          this.getListAll()
          this.procedureFormData?.current?.resetFields()
          message.success(res.msg)
        } else {
          message.warning(res.msg)
          this.setState({ navListSpinning: false })
        }
      })
    })
  }

  // 删除回调
  onDelete = (item) => {
    Modal.confirm({
      title: '确认要删除这个任务吗？',
      icon: <ExclamationCircleFilled />,
      content: '删除后数据将无法恢复，请谨慎操作',
      okText: '删除',
      cancelText: '取消',
      okButtonProps: {
        danger: true,
      },
      onOk: () => {
        this.setState({ navListSpinning: true })
        this.props.dispatch({
          type: 'flowDev/deleteNode',
          params: { id: item.id, taskFlowId: this.getTaskFlowId(item.pid) },
          cb: (res) => {
            if (res.status == 200) {
              this.getListAll()
              message.success(res.msg)
              Bus.emit('refreshFlow')
              if ([1, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22].includes(item.nodeType)) {
                this.props.dispatch({
                  type: 'flowDev/deleteTaskId',
                  params: {
                    id: item.id,
                  },
                })
              }
            } else {
              this.setState({ navListSpinning: false })
              message.error(res.msg)
            }
          },
        })
      },
    })
  }

  renderTreeNodes = (data, themeValue) => {
    const { operations } = this.state
    const { taskId } = this.props
    const tempArr = []
    data.forEach((item) => {
      const {
        name, id, nodeType,
      } = item
      const icon = getIcon(nodeType, taskId ? [taskId] : [], themeValue)
      const tempObj = {
        icon,
        key: id,
        nodeType,
        item: {
          id: item.id,
          title: item.title,
          nodeType,
        },
        selectable: [0, 1, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22].includes(nodeType),
      }
      if (item.pid != '0') {
        tempObj.title = (
          <HufuTreeTitle
            title={name}
            key={item.id}
            freeze={item.isLocked == 1}
            icon
            operations={operations(item)}
          />
        )
      } else {
        tempObj.title = (
          <HufuTreeTitle
            title={name}
            key={item.id}
            icon
            operations={[
              <span
                key={6}
                onClick={() => this.showModal(item.id)}
              >
                新建分组
              </span>,
            ]}
          />
        )
      }
      if (item.children) {
        tempObj.children = this.renderTreeNodes(item.children, themeValue)
      }
      tempArr.push(tempObj)
    })
    return tempArr
  }

  onSelectTask = (selectedKeys, e) => {
    const targetKey = selectedKeys[0]
    const item = this.getTask(targetKey)
    if (item && !isDir(item.nodeType)) {
      this.props.dispatch({
        type: 'flowDev/taskTabsHandle',
        params: {
          id: targetKey,
          item,
        },
      })
    }
    this.props.dispatch({
      type: 'flowDev/setSelectedKey',
      params: {
        selectedKeys: targetKey,
        treeCurrentTargetNode: item,
      },
      cb: () => {
        Bus.emit('editorLayout', targetKey)
      },
    })
  }

  // 根据id找到任务对象
  getTask = (id) => {
    const { navList } = this.props
    return navList.find((item) => id == item.id)
  }

  // 新建任务确认
  dataDevTaskSave = () => {
    this.taskFormData.current.validateFields().then(values => {
      this.setState({ navListSpinning: true })
      const { nodeName1, pid, ...restParams } = values
      const postObj = {
        ...restParams,
      }
      if (this.state.modifyId) {
        postObj.id = this.state.modifyId
      }
      if (!pid) {
        postObj.pid = 2
      } else {
        postObj.pid = pid
      }
      postObj.nodeName = nodeName1
      saveTask(postObj).then(
        (res) => {
          message.success(
            `${this.state.modifyId
              ? this.state.titleName[values.nodeType]
              : '创建任务'}成功`,
          )
          this.setState({
            isShowTask: false,
            navListSpinning: false,
            pItem: null,
            selectedNodeType: null,
          }, () => {
            this.getListAll()
            this.getDirTree()
            Bus.emit('refreshFlow')
          })
        },
        (error) => {
          this.setState({ navListSpinning: false })
        },
      )
    })
  }

  // 新建目录确认
  filesOnOk = () => {
    this.fileForm.current.validateFields().then(values => {
      this.setState({ navListSpinning: true })
      if (this.state.modifyId) {
        values.id = this.state.modifyId
      }
      if (!values.pid) values.pid = 2
      saveDir(values).then(
        (res) => {
          message.success(this.state.modifyId ? '修改目录成功' : '新建目录成功')
          this.setState({
            isShowFiles: false,
            navListSpinning: false,
          }, () => {
            this.getListAll()
            this.getDirTree()
          })
        },
        (error) => {
          this.setState({ navListSpinning: false })
        },
      )
    })
  }


  getNodeTypeOption = () => {
    const { pItem, toolListdatadev } = this.state
    if (pItem) {
      if (pItem.nodeType == 3 || (pItem.nodeType == 23) || ([13, 14, 15, 16, 17, 18, 19].includes(pItem.nodeType))) {
        return (
          toolListdatadev && toolListdatadev.map((item, key) => {
            return <Option key={key} value={item.nodeType}>
              {item.text}
            </Option>
          })
        )
      }
      if (pItem.nodeType == 2 || (pItem.nodeType == 24) || [20, 21].includes(pItem.nodeType)) {
        return (
          [
            <Option value={20}>离线同步</Option>,
            <Option value={21}>接口采集</Option>,
          ]
        )
      }
      if (pItem.nodeType == 4 || (pItem.nodeType == 25) || pItem.nodeType == 22) {
        return (
          <Option value={22}>数据质量</Option>
        )
      }
    }
    return null
  }

  // 移动窗口
  moveModal = (item, nodeType) => {
    this.setState({ navListSpinning: true })
    taskflowTree({ nodeType }).then(
      (res) => {
        let newArr
        if (res && res.length) {
          newArr = res.map((child) => {
            if ((child.nodeType == 0) || child.nodeType == 1) {
              child.disabled = true
            }
            return child
          })
        }
        this.moveFormData.current?.resetFields()
        this.setState({
          moveShow: true,
          moveDirTree: getNavTreeDataFunc(newArr) || [],
          navListSpinning: false,
          modifyId: item.id,
        })
      },
      (erroe) => {
        this.setState({ navListSpinning: false })
      },
    )
  }

  // 移动确认回调
  dataDevDirChange = () => {
    this.moveFormData.current.validateFields().then(values => {
      this.setState({ navListSpinning: true })
      changeDir({
        id: this.state.modifyId,
        pid: values.pid,
      }).then(
        (res) => {
          message.success('移动成功')
          this.setState({
            moveShow: false,
            navListSpinning: false,
          }, () => {
            this.getListAll()
            this.getDirTree()
            Bus.emit('refreshFlow')
          })
        },
        (error) => {
          this.setState({ navListSpinning: false })
        },
      )
    })
  }

  // handleKeyDown = (e) => {
  //   if (e.key == 'Delete') {
  //     const { taskId } = this.props
  //     if (taskId) {
  //       const item = this.getTask(taskId)
  //       if (item && item.nodeType !== 2 && item.nodeType !== 3 && item.nodeType !== 4) {
  //         this.onDelete(item)
  //       }
  //     }
  //   }
  // }

  handleSelectNodeType = (val) => {
    this.setState({
      selectedNodeType: val,
    })
  }

  render() {
    const { title, taskId, themeValue } = this.props
    const { selectedNodeType, osSyncVisible, osSyncjobid, osSynclabel } = this.state
    const descRe = regExp.proName(0, 128)
    return (
      <div
        className={`${styles.script_dev}`}
      // onKeyDown={(e) => this.handleKeyDown(e)}
      >
        <Spin spinning={this.state.navListSpinning}>
          <div className={styles.datadev_tree_box}>
            <ProTree
              selectedKeys={taskId ? [taskId] : []}
              showSearch
              onSelect={this.onSelectTask}
              title={title || '目录'}
              operations={[
                <i
                  key="0"
                  className="iconfont icon-shuaxin"
                  title="刷新"
                  onClick={() => {
                    this.getListAll()
                    this.getDirTree()
                  }}
                />,
                <i
                  key="1"
                  className="iconfont icon-xinjianwenjianjia"
                  title="新建文件夹"
                  onClick={() => this.showFilesModal()}
                />,
                <i
                  key="2"
                  className="iconfont icon-tianjia"
                  title="新建工作流"
                  onClick={() => this.showProcedureModal()}
                />,
              ]}
              treeData={this.state.treeDataNew}
              renderTreeNodes={(data) => this.renderTreeNodes(data, themeValue)}
              ref={(dev) => (this.tree = dev)}
              search={(name) => {
                const searchTree = searchTreeListByName(
                  name,
                  this.props.navList,
                )
                const treeDataNew = getNavTreeDataFunc(
                  searchTree.result,
                )
                this.setState(
                  {
                    treeDataNew,
                  },
                  () => {
                    this.tree.onExpand(searchTree.fatchIds)
                  },
                )
              }}
            />
          </div>
        </Spin>
        <Modal
          title={this.state.modifyId ? '修改目录' : '新建目录'}
          visible={this.state.isShowFiles}
          confirmLoading={this.state.navListSpinning}
          cancelText="取消"
          okText="保存"
          onOk={this.filesOnOk}
          onCancel={() => {
            this.setState({
              isShowFiles: false,
            })
          }}
          maskClosable={false}
        >
          <div className={styles.file_box}>
            <Form
              ref={this.fileForm}
              labelCol={{ span: 5 }}
              wrapperCol={{ span: 19 }}
              autoComplete="off"
            >
              <Item
                label="目录名称"
                name="name"
                rules={[
                  { required: true, message: '请输入目录名称' },
                ]}
              >
                <Input placeholder="请输入目录名称" />
              </Item>
              <Item
                label="父级目录"
                name="pid"
              >
                <TreeSelect
                  allowClear
                  showSearch
                  getPopupContainer={(triggerNode) => triggerNode.parentNode}
                  // dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                  treeData={this.state.dirTree || []}
                  placeholder="请选择父级目录"
                  treeDefaultExpandAll
                  filterTreeNode={(input, treeNode) => treeNode.name.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  fieldNames={{
                    label: 'name', value: 'id', children: 'childs',
                  }}
                />
              </Item>
            </Form>
          </div>
        </Modal>
        <Modal
          width={600}
          title={this.state.modifyId ? '修改工作流程' : '创建工作流程'}
          visible={this.state.isShowTaskFlow}
          confirmLoading={this.state.navListSpinning}
          cancelText="取消"
          okText="保存"
          onOk={this.fileTaskFlow}
          onCancel={() => {
            this.procedureFormData?.current?.resetFields()
            this.setState({
              isShowTaskFlow: false,
            })
          }}
        >
          <div className={styles.file_box}>
            <Form
              labelCol={{ span: 5 }}
              wrapperCol={{ span: 19 }}
              autoComplete="off"
              ref={this.procedureFormData}
            >
              <Form.Item
                label="工作流程名称"
                name="name"
                rules={[
                  { required: true, message: '请输入工作流程名称' },
                  {
                    required: false,
                    pattern: new RegExp(regExp.name(2, 64).reg, 'g'),
                    message: regExp.name(2, 64).text,
                  },
                ]}
              >
                <Input placeholder="请输入工作流程名称" />
              </Form.Item>
              <Form.Item
                label="父级目录"
                name="pid"
              >
                <TreeSelect
                  treeData={this.state.dirTree || []}
                  dropdownStyle={{ maxHeight: '4rem', overflow: 'auto' }}
                  placeholder="选择父级目录"
                  allowClear
                  fieldNames={
                    {
                      label: 'name',
                      value: 'id',
                      children: 'childs',
                    }
                  }
                  filterTreeNode={(input, treeNode) => treeNode.name.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  showSearch
                  treeDefaultExpandAll
                />
              </Form.Item>
              <Form.Item
                label="描述"
                name="remark"
                rules={[
                  { required: false },
                  {
                    pattern: new RegExp(descRe.reg, 'g'),
                    message: descRe.text,
                  },
                ]}
              >
                <TextArea
                  placeholder="请输入工作流程业务描述"
                  autoSize={{ minRows: 3, maxRows: 6 }}
                />
              </Form.Item>
            </Form>
          </div>
        </Modal>
        <Modal
          title={
            this.state.modifyId
              ? this.state.titleName[this.state.pItem?.nodeType]
              : '创建任务'
          }
          confirmLoading={this.state.navListSpinning}
          visible={this.state.isShowTask}
          cancelText="取消"
          okText="保存"
          onOk={() => {
            this.dataDevTaskSave()
          }}
          onCancel={() => {
            this.setState({
              isShowTask: false,
              selectedNodeType: null,
            })
          }}
        >
          <div className={styles.file_box}>
            <Form
              labelCol={{ span: 5 }}
              wrapperCol={{ span: 19 }}
              autoComplete="off"
              ref={this.taskFormData}
            >
              <Form.Item
                label="任务类型"
                name="nodeType"
                rules={[
                  { required: true, message: '请选择任务类型' },
                ]}
              >
                <Select
                  placeholder="请选择任务类型"
                  disabled={!!this.state.modifyId}
                  onChange={this.handleSelectNodeType}
                >
                  {
                    this.getNodeTypeOption()
                  }
                </Select>
              </Form.Item>
              {
                selectedNodeType == 21 && (
                  <Form.Item
                    rules={[
                      { required: true, message: '请选择接口采集类型' },
                    ]}
                    name="apiType"
                    label="接口采集类型"
                  >
                    <Select disabled={!!this.state.modifyId}>
                      <Option key={0} value={0}>Http/Https</Option>
                      <Option key={1} value={1}>WebService</Option>
                    </Select>
                  </Form.Item>
                )
              }
              <Form.Item
                label="任务名称"
                name="nodeName1"
                labelAlign="right"
                rules={[
                  { required: true, message: '请输入任务名称' },
                ]}
              >
                <Input placeholder="请输入任务名称" />
              </Form.Item>
              <Form.Item
                label="父级目录"
                name="pid"
                rules={[
                  { required: true, message: '请选择父级目录' },
                ]}
              >
                <TreeSelect
                  treeData={this.state.dirTree || []}
                  dropdownStyle={{ maxHeight: '4rem', overflow: 'auto' }}
                  placeholder="选择父级目录"
                  allowClear
                  fieldNames={
                    {
                      label: 'name',
                      value: 'id',
                      children: 'childs',
                    }
                  }
                  filterTreeNode={(input, treeNode) => treeNode.name.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  showSearch
                  treeDefaultExpandAll
                />
              </Form.Item>
              <Form.Item
                label="描述"
                name="remark"
                rules={[
                  { required: false },
                  {
                    pattern: new RegExp(descRe.reg, 'g'),
                    message: descRe.text,
                  },
                ]}
              >
                <TextArea
                  placeholder="请输入任务业务描述"
                  autoSize={{ minRows: 3, maxRows: 6 }}
                />
              </Form.Item>
            </Form>
          </div>
        </Modal>
        <Modal
          title="节点克隆"
          confirmLoading={this.state.navListSpinning}
          visible={this.state.isClear}
          cancelText="取消"
          okText="保存"
          // onOk={() => {
          //   this.dataDevTaskClone()
          // }}
          onCancel={() => {
            this.setState({
              isClear: false,
            })
          }}
        >
          <div className={styles.file_box}>
            {/* <TaskCloneForm
              dataDevTaskFlowLists={dataDevTaskFlowLists}
              ref={(div) => (this.taskCloneFormData = div)}
            /> */}
          </div>
        </Modal>
        <Modal
          title="移动"
          confirmLoading={this.state.navListSpinning}
          visible={this.state.moveShow}
          cancelText="取消"
          okText="确认"
          onOk={() => {
            this.dataDevDirChange()
          }}
          onCancel={() => {
            this.setState({
              moveShow: false,
            })
          }}
          maskClosable={false}
        >
          <div className={styles.file_box}>
            <Form
              labelCol={{ span: 5 }}
              wrapperCol={{ span: 19 }}
              autoComplete="off"
              ref={this.moveFormData}
            >
              <Form.Item
                label="父级目录"
                name="pid"
                rules={[
                  { required: true, message: '请选择父级目录' },
                ]}
              >
                <TreeSelect
                  treeData={this.state.moveDirTree || []}
                  dropdownStyle={{ maxHeight: '4rem', overflow: 'auto' }}
                  placeholder="选择父级目录"
                  allowClear
                  // fieldNames={
                  //   {
                  //     label: 'name',
                  //     value: 'id',
                  //     children: 'childs',
                  //   }
                  // }
                  filterTreeNode={(input, treeNode) => treeNode.name.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  showSearch
                  treeDefaultExpandAll
                />
              </Form.Item>
            </Form>
          </div>
        </Modal>
        <OSSyncComponentModal
          visible={osSyncVisible}
          onClose={() => this.setState({ osSyncVisible: false })}
          jobtype="0"
          jobid={osSyncjobid}
          label={osSynclabel}
        />
      </div>
    )
  }
}

export default connect(({
  global,
  flowDev
}) => ({ themeValue: global.themeValue, ...flowDev }))(withRouter(FlowDevTree))
